<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作用域插槽</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#app{
				width:600px;
				min-height:300px;
				margin:50px auto;
				padding:20px;
				border:2px solid black;
				box-shadow:10px 20px 20px 10px gray;
			}
			h3{
				height:50px;
				line-height:50px;
				text-align:center;
				background-color:black;
				color:white;
			}
			ul{
				list-style:none;
			}
			ul li{
				margin:20px 0;
				width:100%;
				height:30px;
				line-height:30px;
				background-color:gray;
				color:white;
				cursor:pointer;
			}
			ul li:hover{
				background:linear-gradient(to right,red,orange);
			}
			.color{
				background-color:orange;
				color:black;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>作用域插槽===应用场景:父组件对子组件的内容进行加工处理</h3>
			<book-list :list="datalist">
				<template slot-scope="slotProps"><!-- soltProps自定义属性 -->
					<strong class="color" v-if="slotProps.item.id==2">
						{{slotProps.item.name}}
					</strong>
					<span v-else>{{slotProps.item.name}}</span>
				</template>
			</book-list>
		</div>
		
		<script>
			/* 作用域插槽===父组件对子组件的内容进行加工处理 */
			let vm = new Vue({
				el:"#app",
				data:{
					datalist:[
						{
							id:1,
							name:"HTML"
						},
						{
							id:2,
							name:"CSS"
						},
						{
							id:3,
							name:"Javascript"
						},
						{
							id:4,
							name:"Jquery"
						},
						{
							id:5,
							name:"Ajax"
						}
					]
				},
				components:{
					"book-list":{
						template:`
						<div>
							<ul>
								<li :key="data.id" v-for="data in list">
								<slot :item="data">
									{{data.id+", "+data.name}}
								</slot>
								</li>
							</ul>
						</div>`,
						props:["list"]
					}
				}
			})
		</script>
	</body>
</html>
